<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>{$region['title']}</title>
    <link rel="stylesheet" href="{MODULE_URL}template/mobile/style/style1/static/css/weui.css" />
    <link rel="stylesheet" type="text/css" href="{MODULE_URL}template/mobile/style/style1/static/css/region.css" />
    <!--组件依赖js begin-->
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/zepto.js"></script>
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/zepto.extend.js"></script>
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/zepto.ui.js"></script>
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/zepto.fix.js"></script>
    <!--刷新-->
    <script type="text/javascript" src="{MODULE_URL}template/mobile/style/style1/static/js/refresh.js"></script>
    <style type="text/css">
    .tab_title {
        padding: 0px;
        width: 100%;
        display: -moz-box;
        display: -webkit-box;
    }
    
    .tab_title a {
        display: block;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-right: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        font-size: 14px;
    }
    
    .tab_title a:last-child {
        border-right: none;
    }
    
    .tab_title a.active {
        color: #EB233F;
        font-size: 16px;
        background: url({MODULE_URL}template/mobile/style/style1/static/image/hongjiao.png) 0px 0px no-repeat #fff;
        background-size: 16px;
    }
    
    #btn_div {
        position: fixed;
        height: 50px;
        z-index: 990;
        right: 0px;
        bottom: 120px;
    }
    
    .btn_img {
        background:url({MODULE_URL}template/mobile/style/style1/static/image/menu_btn.png) no-repeat;
        width: 30px;
        height: 30px;
        background-size: 30px;
        display: inline-block;
        margin: 10px;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
    }
    
    #btn_dj {
        height: 50px;
        width: 50px;
        background: #48b54e;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 100;
    }
    
    .menu_btn {
        height: 50px;
        padding: 5px 0px 5px 5px;
        font-size: 14px;
        background: #48b54e;
        color: #fff;
        position: absolute;
        right: 50px;
        width: 247px;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        z-index: 80;
    }
    
    .menu_btn a {
        display: inline-block;
        color: #fff;
        border-right: 1px solid #fff;
        text-align: center;
        width: 80px;
        height: 100%;
        line-height: 40px;
    }
    
    .hide_b {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    
    .show_b {
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    
    .hide_m {
        -moz-transform: translateX(297px);
        -webkit-transform: translateX(297px);
        opacity: 0;
    }
    
    .show_m {
        -moz-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
    /*加载*/
.ui-refresh-down{ height:42px; border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; line-height:42px; background:#f0f0f0;text-align:center;}
.ui-refresh-icon{ display:inline-block; content:''; background:url({MODULE_URL}template/mobile/style/style1/static/image/arrow-down.png) no-repeat; width:12px; background-size:12px; height:7px; margin-right:5px;}
.ui-refresh-icon{display:inline-block; content:''; background:url({MODULE_URL}template/mobile/style/style1/static/image/arrow-down.png) no-repeat; width:12px; background-size:12px; height:7px; margin-right:5px;}
.ui-loading{display:inline-block; content:''; background:url({MODULE_URL}template/mobile/style/style1/static/image/loading.gif) no-repeat; width:16px; background-size:16px; height:16px; margin-right:5px;}
    </style>
</head>

<body>
    <header id="header">
        <div class="header_div">
            <div id="left_div" onClick="window.location.href='{php echo $this->createMobileUrl('nav')}'"></div>
            <div id="middle_div">
                <h1 id="title">报修列表</h1></div>
            <div id="right_div">
                <div class="right_bottom"></div>
                <div class="right_img"></div>
            </div>
        </div>
    </header>
    <div class="cont">
        <div class="tab_title">
            <a href="{php echo $this->createMobileUrl('repair',array('op' => 'list','status' => 0))}" {if $_GPC['status'] == 0}class="active"{/if}>全部报修</a>
            <a href="{php echo $this->createMobileUrl('repair',array('op' => 'list','status' => 1))}" {if $_GPC['status'] == 1}class="active"{/if}>已处理</a>
            <a href="{php echo $this->createMobileUrl('repair',array('op' => 'list','status' => 2))}" {if $_GPC['status'] == 2}class="active"{/if}>未处理</a>
        </div>
        <div class="ui-refresh" id="repair">
            <div class="weui_cells weui_cells_access" id="data-list">

            </div>
            {if $total>9}
            <div class="ui-refresh-down"></div>
            {/if}
        </div>
    </div>
    {template 'style/style1/footer'}
    <!--右边点击菜单-->
    {php $member = $this->changemember();$region = pdo_fetch("SELECT * FROM".tablename('xcommunity_region')."WHERE id=:id",array(':id' => $member['regionid']));}
    <div id="btn_div">
        <div id="btn_dj"><span id="btn_input" class="btn_img hide_b"></span></div>
        <div id="menu_b" class="menu_btn hide_m"><a href="tel:{$region['linkway']}">电话报修</a><a href="{php echo $this->createMobileUrl('repair',array('op' => 'add'))}">在线报修</a><a href="{php echo $this->createMobileUrl('repair',array('op' => 'my'))}">我的报修</a></div>
    </div>
    <script>
    $(function() {
        $("#btn_div").fix({
            right: 0,
            bottom: 120
        })
        $("#btn_dj").click(function() {
            var input_btn = $("#btn_input")
            if (input_btn.attr("class") == "btn_img hide_b") {
                input_btn.removeClass();
                input_btn.addClass("btn_img show_b");
            } else {
                input_btn.removeClass();
                input_btn.addClass("btn_img hide_b");
            }
            var menu_b = $("#menu_b")
            if (menu_b.attr("class") == "menu_btn hide_m") {
                menu_b.removeClass();
                menu_b.addClass("menu_btn show_m");
            } else {
                menu_b.removeClass();
                menu_b.addClass("menu_btn hide_m");
            }
        })
    })
    </script>
    <script>
     /*ajax请求函数,判断共几页，呈现不同效果*/
    (function() {
         xqAjax();
            function xqAjax() {
                var url = "{php echo $this->createMobileUrl('repair',array('op' => 'list'))}";
                var status = "{$_GPC['status']}";
                $.ajax({
                    url: url,
                    async: false,
                    type: 'post',
                    dataType: 'json',
                    data: {
                        status : status
                    },
                    beforeSend: function() {
                        //$("#data-list").html("<li class='seach_loading'><img src='{MODULE_URL}template/mobile/style/style1/static/image/loading.gif'/>为您搜索中……</li>")
                    },
                    success: function(data) {
                        var $list = $('.data-list'),
                            html = (function(data) { //数据渲染
                                var liArr = [];
                                $.each(data.allhtml, function() {
                                    liArr.push(this.html);
                                });
                                return liArr.join('');
                            })(data);

                        $('.weui_cells_access').html(html)
                        if (data.page_count < 2) {
                            $(".ui-refresh-down").html("<span class='ui-refresh-label'>没有更多内容了</span>");
                        } else {
                            refreshFun();
                        }
                    },
                    // error: function() {
                    //     alert('请求不到数据，请重新搜索！');
                    // }

                })
            }

            /*组件初始化refreshFun函数*/

            function refreshFun() {
                var index = 1;
                $('.ui-refresh').refresh({
                    ready: function(dir, type) {
                        var me = this;
                         var status = "{$_GPC['status']}";
                        index++;
                        $.getJSON("{php echo $this->createMobileUrl('repair',array('op' => 'list'))}", {
                            page: index,
                             status : status
                        }, function(data) {
                            var $list = $('.weui_cells_access'),
                                html = (function(data) { //数据渲染
                                    var liArr = [];
                                    $.each(data.allhtml, function() {
                                        liArr.push(this.html);
                                    });
                                    return liArr.join('');
                                })(data);
                            $list[dir == 'up' ? 'prepend' : 'append'](html);
                            if (index < data.page_count) {
                                me.afterDataLoading();
                            } else {
                                me.disable(dir, false);
                            }
                        });
                    }
                });

            }
         /*组件初始化js end*/
        })();
    </script>
    <script>
    $(function() {
        select('a1');
    });
    </script>
</body>

</html>
